<template>
	<div class="category-page">
		<!-- 顶部搜索栏 -->
		<van-sticky>
			<van-search v-model="searchValue" placeholder="请输入商品名称" shape="round" @search="onSearch" />
		</van-sticky>

		<!-- 分类内容 -->
		<div class="category-content">
			<!-- 左侧分类导航 -->
			<div class="category-nav">
				<van-sidebar v-model="activeCategory">
					<van-sidebar-item v-for="category in categories" :key="category.id" :title="category.name"
						@click="onClickLeftMenus(category.id)" />
				</van-sidebar>
			</div>

			<!-- 右侧商品列表 -->
			<div class="product-list">
				<van-grid :border="false" :column-num="2">
					<van-grid-item v-for="product in currentProducts" :key="product.id" class="product-card"
						@click="gotoDetail(product.id)">
						<div class="product-container">
							<van-image :src="product.image" class="product-image" fit="contain" />
							<div class="product-info">
								<div class="product-name">{{ product.name }}</div>
								<div class="product-price">¥{{ product.price }}</div>
							</div>
						</div>
					</van-grid-item>
				</van-grid>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		showToast
	} from 'vant';
	import {
		getType,
		getCreateProductsListBytype
	} from '@/apis/products';
	import { useRouter, useRoute } from 'vue-router'
	
	const router = useRouter()
	const route = useRoute()
	
	// 初始化数据
	const searchValue = ref(''); // 搜索值
	const activeCategory = ref(1); // 当前选中的分类索引
	const categories = ref([]); // 分类名字
	const currentProducts = ref([]); // 右边商品显示

	// 搜索方法
	const onSearch = () => {
		showToast(`搜索: ${searchValue.value}`);
	};

	// 获取分类列表
	const gettype = () => {
		getType().then(res => {
			if (res.code === 0 && res.data) {
				categories.value = res.data.map(item => ({
					id: item.id,
					name: item.name
				}));
			} else {
				showToast('获取分类数据失败');
			}
		}).catch(error => {
			
			showToast('获取分类数据出错');
		});
	};

	// 根据分类ID获取商品列表
	const getCreateProductsBytype = () => {
		const type = activeCategory.value;
		getCreateProductsListBytype(type).then(res => {
			
			if (res.code === 0 && res.data) {
				currentProducts.value = res.data.map(item => ({
					id:item.id,
					image: item.cover,
					name: item.productName,
					price: item.price
				}));
			} else {
				showToast('获取商品数据失败');
			}
		}).catch(error => {
			console.error('获取商品数据出错:', error);
			showToast('获取商品数据出错');
		});
	};
	
	// 点击左边切换右边显示内容
	const onClickLeftMenus = (id) => {
		activeCategory.value = id;
		getCreateProductsBytype();
	};

	// 跳转到详情页
	const gotoDetail = (id) => {
		router.push({
		   name: 'detail',
		   query: { id },
		 })
	}

	onMounted(() => {
		gettype();
		getCreateProductsBytype(); // 默认显示
	});
</script>

<style scoped>
	.category-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.category-content {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.category-nav {
		width: 100px;
		height: 100%;
		overflow-y: auto;
		background-color: #f7f8fa;
	}

	.product-list {
		flex: 1;
		height: 100%;
		overflow-y: auto;
		padding: 10px;
	}

	.product-card {
		padding: 3px;

	}

	.product-container {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		height: 100%;
	}

	.product-image {
		width: 100%;
		height: 150px;
		background-color: #f5f5f5;
	}

	.product-info {
		padding: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		line-height: 1.4;
		max-height: 2.8em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 6px;
	}

	.product-price {
		font-size: 16px;
		font-weight: 500;
		color: #f44;
		margin-top: auto;
	}
</style>